<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <ul>
        <li v-for="item in news" :key="item.id">
            <h2>{{ item.title }}</h2>
            <p>{{ item.text }}</p>
            <p>发布时间：{{ item.time | transeTime }}</p>
        </li>
       </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter('transeTime',function(v) {
           const date = new Date(v)
           const year = date.getFullYear()
           const month = (date.getMonth() + 1 + '').padStart(2, '0')
           const day = (date.getDate() + '').padStart(2, '0')
           const h = (date.getHours() + '').padStart(2, '0')
           const m = (date.getMinutes() + '').padStart(2, '0')
           const s = (date.getSeconds() + '').padStart(2, '0')
           return year + '-' + month + '-' + day + ' ' + h + ':' + m + ':' + s

        })

       
        new Vue({
            el: '#app',
            data: {
              news: [
                {
                    id: 1,
                    title: '后天，终于来了',
                    text: '国务院新闻办公室定于2021年5月11日（星期二）上午10时举行新闻发布会，请国务院第七次全国人口普查领导小组副组长、国家统计局局长宁吉喆，国务院第七次全国人口普查领导小组办公室主任、国家统计局副局长李晓超，国务院第七次全国人口普查领导小组办公室副主任、',
                    time: 1666072769099
                },
                {
                    id: 2,
                    title: '别让中国抢美国饭碗',
                    text: '据中国新闻网5月7日援引《华盛顿邮报》报道，6日当天，美国总统拜登在路易斯安那州查尔斯湖市发表演讲，他以一座上世纪70年代修建的跨湖大桥为背景说，必须对美国基础建设计划采取行动。然而在这次演讲中，拜登多次提到了中国。',
                    time: 1666072749099
                },
                {
                    id: 3,
                    title: '马斯克承认了！狗狗币闪崩近40%',
                    text: '一向有些口无遮拦的新晋全球首富马斯克这次又“说错话了”。当地时间5月8日周六晚，特斯拉CEO马斯克将以主持人的身份，参与录制NBC的热门深夜喜剧秀《周六夜现场》（SNL）。期间，他大力宣传了狗狗币，但在被追问狗狗币是否是一种“骗局”时。他回答：“是的。”而后，狗狗币应声下跌。',
                    time: 1663072769099
                }
              ]
            }
            
        })
    </script>
</body>
</html>